<template>
    <div>
        <van-overlay :show="showLoading">
            <slot>
                <div class="loadingBox" @click.stop>
                    <div class="block">
                        <van-loading type="spinner" color="#1989fa">{{ title }} </van-loading>
                    </div>
                </div>
            </slot>
        </van-overlay>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
defineProps({
    title: {
        type: String,
        default: '加载中...'
    },
    showLoading: {
        type: Boolean,
        default: false
    }
});
</script>

<style lang="scss" scoped>
.van-overlay {
    background-color: rgba(255, 255, 255, 0);
}

.loadingBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
        width: 2rem;
        height: 1rem;
        background-color: #fff;
        border-radius: 0.05rem;
        box-shadow: rgba(149, 157, 165, 0.407) 0px 8px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
